<template>
  <div>
  	<div class="find">
  		<i class="fa fa-search"></i><input
        type="text"
        placeholder="请输入你所要查找的电影"
        maxlength="10"
        
        v-model="inputValue"
      />

  	</div>
	<div class="lx">
		<p>电影/电视剧/综艺</p>
	</div>
	
	<hr>
	
	<div id="cjn">
		<ul>
			<li v-for="item in cjn" :key="item.id" >
				<div class="textmove">
					<div class="wraper">
						<img :src="item.img" >
					</div>
					<div class="introduce">
						<p class="name">{{ item.name }}</p>
						<p class="movestyle">剧情，喜剧，犯罪</p>
						<p class="movedata">2020-6-30</p>
						<p><span>{{ item.comment }}</span></p>
					</div>
				</div>
			</li>
		</ul>
	</div>
  </div>
</template>

<script>

	export default{
		
		name:"inputValue",
		
		data(){
			return{
				inputValue:"2",
				productList:[],//产品列表
				productListRst:[],//搜索之后的产品列表
				
			}
		},
		created(){
			this.initParams();
			this.searchInputChange();
		},
		computed:{
			cjn(){
				if(this.inputValue == "" || this.inputValue == undefined ){
					return this.productList;
				}else{
					return this.productList.filter(item=>{
						return item.name.includes(this.inputValue);
					})
				}
			}
		},
		methods:{
			
			
			initParams(){
				this.productList=[
					{
							"id":1,
							"name":"机械师2：复活",
							 "img":"/images/001.png",
							"comment":8.9,
							"performer":"主演：杰森·斯坦森 杰西卡·阿尔芭 汤米·李·琼斯 杨紫琼 山姆·哈兹尔丁",
							"Cinema":"今天50家影院放映800场"
					},{
					"id":2,
					"name":"敢死队",
					"img":"/images/002.png",
					"comment":8.7,
					"performer":"主演：西尔维斯特·史泰龙，杰森·斯坦森，梅尔·吉布森",
					"Cinema":"今天50家影院放映750场"
					},{
					"id":3,
					"name":"最后的巫师猎人",
					"img":"/images/003.png",
					"comment":8.4,
					"performer":"主演：范·迪塞尔，萝斯·莱斯利，伊利亚·伍德，迈克尔·凯恩，丽纳·欧文",
					"Cinema":"今天50家影院放映600场"
					},{
					"id":4,
					"name":"饥饿游戏3",
					"img":"/images/004.png",
					"comment":7.6,
					"performer":"詹妮弗·劳伦斯，乔什·哈切森，利亚姆·海姆斯沃斯",
					"Cinema":"今天50家影院放映550场"
					},{
					"id":5,
					"name":"钢铁骑士",
					"img":"/images/005.png",
					"comment":7.3,
					"performer":"本·温切尔，乔什·布雷纳，玛丽亚·贝罗， 迈克·道尔， 安迪·加西亚",
					"Cinema":"今天50家影院放映500场"
					},{
					"id":6,
					"name":"奔跑者",
					"img":"/images/006.png",
					"comment":6.6,
					"performer":"尼古拉斯·凯奇，康妮·尼尔森，莎拉·保罗森，彼得·方达",
					"Cinema":"今天50家影院放映500场"
					}
				];
				
			},
			
			
		
			
			
			
			
		}
	}


</script>
<style >
	.wraper{
		float: left;
	}
	.name{
		font-size: 18px;
		font-weight: bold;
	}
	p{
		line-height: 30px;
	}
	img{
		width: 90px;
	}
	
	.introduce{
		width: 80%;
		float:right;
	}
	.textmove{
		margin: 10px;
	}
	.find{
		background-color: #CCC;
		line-height: 60px;
		text-align: center;
	}
	input{
		width: 90%;
		height: 30px;
		border-radius: 5px;
		border: 0px;
		margin-bottom: 17px;	
	}
	.lx{
		font-size: 17px;
		color: #868686;
		margin: 10px;
		font-weight: bold;
	}
	hr{
		color: #868686;
	}
	
</style>
